<template>
	<view class="columnbox wdh-100 content" v-if="prescription!=''">
		<view class="t-box wdh-100">{{getDate(prescription.addtime)}} 开方</view>
		<view class="columnbox info-box" v-if="prescription.paystatus>1&&prescription.paystatus<7">
			<!-- <view class="i-title">·辩证·</view> -->
			<view class="wdh-100 bz-box rowbox spb">
				<view>
					【订单状态】<text v-if="prescription.paystatus==2">已付款</text>
					<text v-else-if="prescription.paystatus==3">配送中</text>
					<text v-else-if="prescription.paystatus==4">已完成</text>
					<!-- <text v-else-if="prescription.paystatus==3">待发货</text>
					<text v-else-if="prescription.paystatus==4">待收货</text>
					<text v-else-if="prescription.paystatus==5">已完成</text>
					<text v-else-if="prescription.paystatus==6">申请退款</text>
					<text v-else-if="prescription.paystatus==7">同意退款</text>
					<text v-else-if="prescription.paystatus==8">已取消</text> -->
				</view>
				<view @click="showExpress" v-if="prescription.paystatus>2&&prescription.paystatus<6"
					style="width: 140rpx;"><u-button class="wdh-100" color="#00b6b2" size="mini">查看物流</u-button></view>
			</view>
			<view class="wdh-100 bz-box">
				【配送方式】{{prescription.ziti==1?'快递配送':'自提'}}
			</view>
			<view class="wdh-100 bz-box rowbox jus als" v-if="prescription.ziti==1">
				<view> 【收货地址】</view>
				<view class="columnbox als" style="width: 470rpx;">
					<view>{{address.name}} {{address.phone}}</view>
					<view>{{address.province}}{{address.city}}{{address.county}}{{address.area}}</view>
				</view>
			</view>
			<view class="wdh-100 bz-box rowbox jus als" v-else>
				<view> 【药店地址】</view>
				<view class="columnbox als" style="width: 470rpx;">
					<view>{{pharmacyharmacy.name}} {{pharmacyharmacy.phone}}</view>
					<view>
						{{pharmacyharmacy.province}}{{pharmacyharmacy.city}}{{pharmacyharmacy.county}}{{pharmacyharmacy.area}}
					</view>
					<view class="def-col rowbox" style="margin-top: 20rpx;" @click="showStoreAddress">
						<u-icon name="map-fill" color="#00b6b2" size="32rpx"></u-icon>
						<view style="margin-left: 4rpx;">导航</view>
					</view>
				</view>
			</view>
		</view>
		<view class="columnbox info-box">
			<view class="i-title">·辩证·</view>
			<view class="wdh-100 bz-box">
				【患者信息】{{prescription.name}} {{prescription.sex=='2'?'女':'男'}} {{prescription.age}}岁
			</view>
			<view class="wdh-100 bz-box">
				【诊断】{{prescription.bianbing}}
			</view>
		</view>
		<view class="columnbox info-box" style="position: relative;">
			<view class="i-title">·开方·</view>
			<view class="wdh-100 bz-box jixing-box">
				{{prescription.jixing}}
			</view>
			<view class="wdh-100 bz-box" style="font-size: 40rpx;">
				Rp：
			</view>
			<view class="wdh-100 bz-box jixing-box">
				<view class="wdh-100 prescriptiondrug-list" v-if="prescription.status==1">
					<view v-for="(item,index) in prescriptiondrug" :key='index'>
						{{item.chinesedrug}}
					</view>
				</view>
				<view v-else>
					<view v-if="prescription.paystatus==1">
						购买前不可查看
					</view>
					<view class="wdh-100 prescriptiondrug-list" v-else>
						<view v-for="(item,index) in prescriptiondrug" :key='index'>
							{{item.chinesedrug}}
						</view>
					</view>
				</view>
			</view>
			<view class="wdh-100 bz-box  yl-box">
				【用量】共 <text>{{prescription.ji}}</text> 剂，
				共服 <text>{{prescription.day}}</text> 日，
				每日分<text>{{prescription.ci}}</text> 次服用，
			</view>
			<image src="/static/img/seal.jpg" mode="widthFix" class="seal-img"></image>
		</view>
		<!-- <view class="columnbox info-box">
            <view class="i-title">·选填·</view>
            <view class="wdh-100 bz-box">
                【购药前可见处方】{{prescription.chufangKejian==1?'可见':'不可见'}}
            </view>
            <view class="wdh-100 bz-box">
                【诊金】¥ {{prescription.zhenjin.toFixed(2)}}
            </view>
        </view> -->
		<view class="columnbox info-box">
			<view class="i-title">·明细·</view>
			<!-- 	<view class="wdh-100 bz-box">
				【药费】¥{{ycPrice}} * {{prescription.ji}} = ¥{{ycPrice*prescription.ji}}
			</view>
			<view class="wdh-100 bz-box">
				【诊金】¥ {{prescription.zhenjin.toFixed(2)}}
			</view>
			<view class="wdh-100 bz-box">
				【问诊预约】¥ 0.00
			</view> -->
			<view class="wdh-100 bz-box">
				【总计】¥
				{{(ycPrice*prescription.ji + prescription.zhenjin * 1).toFixed(2)}}
			</view>
		</view>
		<view class="columnbox info-box">
			<view class="wdh-100" style="text-align: right;">{{getDate(prescription.addtime)}}</view>
			<view class="wdh-100 rowbox jus bz-box als">
				【医生签名】 <image style="width: 320rpx;margin-left: 20rpx;" :src="prescription.qianming" mode="widthFix">
				</image>
			</view>
		</view>
		<view class="t-box wdh-100">注：本处方当日有效</view>
		<template v-if="prescription.paystatus==1">
			<view style="width: 100%;height: 200rpx;"></view>
			<view class="rowbox wdh-100 bottom-box">
				<view class="rowbox wdh-100 send-btn" @click="toPay">去付款</view>
			</view>
		</template>
		<!-- <template v-if="(prescription.paystatus==2||prescription.paystatus==3)&&prescription.ziti==2">
			<view style="width: 100%;height: 200rpx;"></view>
			<view class="rowbox wdh-100 bottom-box">
				<view class="rowbox wdh-100 send-btn" @click="showStoreAddress">药店导航</view>
			</view>
		</template> -->
	</view>
</template>

<script>
	import time from '@/utils/time.js'
	export default {
		data() {
			return {
				id: 0,
				prescription: '',
				prescriptiondrug: '',
				ycPrice: 0,
				pharmacyharmacy: '',
				address: ''
			};
		},
		onLoad(options) {
			this.id = options.id * 1
			this.getDetail()
		},
		computed: {
			// totalPrice() {
			// 	return this.ycPrice + this.prescription.zhenjin * 1
			// },
		},
		methods: {
			showExpress() {
				uni.navigateTo({
					url: '/packageA/expres/expres?id=' + this.id + '&state=2'
				})
			},
			showStoreAddress() {
				console.log('===', parseFloat(this.pharmacyharmacy.lat))
				uni.openLocation({
					latitude: parseFloat(this.pharmacyharmacy.lat), // 纬度
					longitude: parseFloat(this.pharmacyharmacy.lng), // 经度
					address: this.pharmacyharmacy.area, // 地址的详细描述
					success() {
						console.log('地图打开成功');
					},
					fail(error) {
						console.error('地图打开失败', error);
					}
				});
			},
			toPay() {
				uni.redirectTo({
					url: './confirmOrder?id=' + this.id + '&type=zhongyao'
				})
			},
			getDate(v) {
				return time.toLocalDate(v)
			},
			getDetail() {
				this.$req.post('/doctor/prescriptioninfo', {
					id: this.id
				}).then(res => {
					this.prescription = res.data.data.prescription
					this.prescriptiondrug = res.data.data.prescriptiondrug
					this.pharmacyharmacy = res.data.data.pharmacyharmacy
					this.getPriceDetail()
					if (res.data.data.prescription != 0) {
						this.getAddressDetail()
					}
				})
			},
			getAddressDetail() {
				this.$req.post('/user/userareaInfo', {
					id: this.prescription.addressid
				}).then(res => {
					this.address = res.data.data
				})
			},
			getPriceDetail() {
				let price = 0
				this.prescriptiondrug.forEach(v => {
					price += v.price * v.gram
				})
				this.ycPrice = price

				// let list = []
				// this.prescriptiondrug.forEach(v => {
				// 	list.push(v.chinesedrugid)
				// })

				// this.$req.post('/doctor/yaofangprice', {
				// 	chinesedrugids: list.join(',')
				// }).then(res => {
				// 	let yclist = []
				// 	this.prescriptiondrug.forEach(v => {
				// 		for (var i = 0; i < res.data.data.length; i++) {
				// 			if (v.chinesedrugid == res.data.data[i].id) {
				// 				yclist.push(Object.assign({}, v, res.data.data[i]))
				// 				break;
				// 			}
				// 		}
				// 	})
				// 	// this.detailPriceList = list
				// 	let price = 0
				// 	yclist.forEach(v => {
				// 		price += v.price * v.gram
				// 	})
				// 	this.ycPrice = price
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		font-size: 28rpx;
	}

	.t-box {
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		color: #626262;
	}

	.info-box {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 32rpx 32rpx;
		width: 710rpx;
	}

	.i-title {
		font-weight: bold;
		// margin-bottom: 10rpx;
	}

	.bz-box {
		margin-top: 20rpx;
	}

	.jixing-box {
		border-bottom: #b2b4b7 dotted 1px;
		padding-bottom: 20rpx;
	}

	.prescriptiondrug-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		line-height: 50rpx;

		view {
			margin-right: 32rpx;
		}
	}

	.yl-box {
		text {
			color: #f17267;
			margin: 0 10rpx;
		}
	}

	.seal-img {
		width: 240rpx;
		height: 240rpx;
		position: absolute;
		bottom: 40rpx;
		z-index: 2;
		right: 40rpx;
	}
</style>